<template>
	<AdBanner :itemIndex="itemIndex" :showIndex="1" diyStyle="margin:0rpx 0rpx 20rpx 0rpx"/>
	<view class="estate_card_box" @click="clickFun">
		<view class="header text_ellipsis">
			{{estateData.name}}
		</view>
		<view class="img">
			<Avatar
				:fileName="estateData.img_url" 
				radius="10rpx"
				:joinUrlFun="joinEstateImg"
				size="400rpx"/>
			<view class="estate_money">
				{{changeNums(parseFloat(estateData.price),10000)}}元
			</view>
		</view>
		<view class="footer">
			<view class="estate_footer_item">
				<view class="icon">
					<Avatar
						:fileName="estateData.user.user_avatar" 
						radius="50rpx"
						size="50rpx"/>
				</view>
				<view class="data text_ellipsis">
					{{estateData.user.nick_name_by_dormitory}}
				</view>
			</view>
			<view class="estate_footer_item">
				<view class="icon">
					<MyIcons size="30rpx" :src="joinSystemPath('time.png')"/>
				</view>
				<view class="data">
					{{deleteStrByPatten(estateData.createAt,/ \d{2}:\d{2}:\d{2}/)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Avatar from '@/components/Avatar/Avatar.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {
		joinSystemPath,
		joinEstateImg
	} from '@/utils/imgJoinName.js'
	import {
		deleteStrByPatten,
		changeNums
	} from '@/utils/changeData.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		primary_text_hot_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		estateData:{
			type:Object
		},
		itemIndex:{
			type:Number
		}
	})
	const emits = defineEmits(['clickEstateCardEmit'])
	
	const clickFun=()=>{
		emits('clickEstateCardEmit',props.estateData)
	}
	
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.estate_card_box{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		color: v-bind(primary_text_color);
		.header{
			font-size: 40rpx;
		}
		.img{
			width: 100%;
			display: flex;
			align-items: center;
			margin: 10rpx 0;
			.estate_money{
				font-size: 50rpx;
				margin-left: 10rpx;
				color: v-bind(primary_text_hot_color);
			}
		}
		.footer{
			display: flex;
			.estate_footer_item{
				display: flex;
				align-items: center;
				.data{
					margin: 0 10rpx;
					font-size: 25rpx;
					max-width: 200rpx;
				}
			}
		}
	}
</style>